<template>
  <div class="mapinfo">
    <div ref="homepagemapinfo"></div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import echarts from "echarts";
import "echarts-gl";
import { EChartOption } from "echarts";

@Component
export default class mapinfo extends Vue {
  public option: Object = {
    legend: {
      right: "5%",
      bottom: "5%",
    },
    geo3D: {
      map: "sd",
      top: -20,
      viewControl: {
        distance: 90,
        alpha: 50,
      },
      postEffect: {
        enable: true,
        bloom: {
          enable: true,
        },
      },
      itemStyle: {
        color: "#031E7A",
        opacity: 1,
        borderColor: "#17759b",
        borderWidth: 1,
      },
      emphasis: {
        itemStyle: {
          areaColor: "#1BACD5",
          opacity: 0.9,
        },
      },
      label: {
        show: true,
        distance: 0,
        formatter: (params: any) => {
          let regexp = /(济南|青岛|淄博|枣庄|东营|烟台|潍坊|济宁|泰安|威海|日照|莱芜|临沂|德州|聊城|滨州|菏泽)(\D{1})/g;
          let test = regexp.test(params.name);
          params.rename = params.name.replace(RegExp.$2, "");
          return params.rename;
        },
        textStyle: {
          color: "#E2E2E2",
          backgroundColor: "rgba(0,23,11,0)",
        },
      },
    },
    series: [
      {
        type: "bar3D",
        coordinateSystem: "geo3D",
        data: [
          {
            // 数据项的名称
            name: "数据1",
            // 数据项值
            value: [117, 36, 1000],
          },
          {
            name: "数据2",
            value: [117, 37, 500],
          },
          {
            name: "数据3",
            value: [117, 37.5, 700],
          },
          {
            name: "数据4",
            value: [34, 50, 10],
          },
        ],
      },
    ],
  };
  $refs!: {
    homepagemapinfo: HTMLDivElement;
  };
  public initmap(): void {
    var myChart = echarts.init(this.$refs.homepagemapinfo);
    // console.log(myChart);

    myChart.setOption(this.option);
  }
  private mounted(): void {
    this.initmap();
  }
}
</script>

<style lang="scss" scoped>
.mapinfo {
  width: 100%;
  height: 100%;
  > div {
    width: 100%;
    height: 100%;
  }
}
</style>

